<template>
  <view :class="theme">
    <view class="bg-5 fixed"
      style="top: var(--window-top); left: var(--window-left); right: var(--window-right); padding: var(--status-bar-height) 0 150rpx;" />
    <u-sticky>
      <view class="bg-5" style="padding: calc(var(--status-bar-height) + 10rpx) 30rpx 30rpx;">
        <view class="mt-20 fd-row ai-center br-16 bg-2" style="padding: 0 20rpx; height: 60rpx;">
          <u-icon name="search" size="40" color="#a4a2a2" />
          <input @confirm="search" v-model="goods.search" confirm-type="search" class="ml-12 f1 fs-24 height-100percent"
            type="text" placeholder="输入关键词搜素">
        </view>
      </view>
    </u-sticky>

    <view style="margin: 0 30rpx; z-index: 9;">
      <swiper class="br-20 oh" style="height: 290rpx;" indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="rgba(255, 255, 255, 1)" :indicator-dots="true" :autoplay="true">
        <swiper-item v-for="banner in banners" :key="banner">
          <u-image radius="20" width="100%" height="100%" :src="banner.image" />
        </swiper-item>
      </swiper>

      <view class="mt-30 fd-row flex-wrap bg-3">
        <view @click="uniNavigator({ url: `/pages/client/main/goodsInfo?id=${item.id}` })" v-for="item in goods.list"
          :key="item.id" style="width: calc(50% - 20rpx); margin: 0 10rpx 20rpx;" class="bg-2 br-10 oh">
          <!-- <u-image width="100%" height="340" :src="item.goods_image" /> -->
          <u-lazy-load :image="item.goods_image" height="340" />
          <view style="padding: 14rpx 14rpx 30rpx;">
            <text class="fs-28 color-3 ellipsis">{{ item.goods_name }}</text>
            <text class="mt-16 color-15">
              <text class="fw-700 fs-32">{{ item.goods_price }}</text>
              <text class="ml-4">星核</text>
            </text>
            <!-- <label class="as-start mt-14 fs-20 br-6" style="border: #3b86f6 2rpx solid;">
              <label class="pl-6 pr-6 bg-6 color-2">赠送</label>
              <label class="color-5 pl-10 pr-10">{{ item.goods_coin }} 能源</label>
            </label> -->
          </view>
        </view>
      </view>

      <view class="mt-30 mb-30 ai-center">
        <u-image v-if="!goods.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <u-loadmore :status="goods.cache.status" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { checkVersion } from "@/common/libs/dependency";
import { useMapState } from "@/common/libs/store";
import { getClient, pager, uniNavigator } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh, onReachBottom, onTabItemTap } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);

const banners = ref<AnyObject[]>([]);

const goods = reactive({
  sortType: "all",
  page: 0,
  limit: 20,
  search: "",
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
  list: [] as AnyObject[]
});

onLoad(() => {
  uni.request({
    url: "/advertisingList",
    data: { type: 1, page: 1, limit: 12 },
    success({ data }: any) {
      banners.value = data;
    }
  });
  getGoods();
  [5, 6].includes(getClient()) && checkVersion();
});

onPullDownRefresh(() => {
  uni.request({
    url: "/advertisingList",
    data: { type: 1, page: 1, limit: 12 },
    success({ data }: any) {
      banners.value = data;
    }
  });
  goods.search = "";
  search();
  setTimeout(uni.stopPullDownRefresh, 360);
});

onReachBottom(() => getGoods());

onTabItemTap((e) => {
  uni.setTabBarStyle({
    backgroundColor: "#ffffff",
    borderStyle: "white",
  });
});

const getGoods = () => {
  pager({ url: "/goodsList", data: { query: goods.search, goods_type: 1 } }, goods);
}

const search = () => {
  Object.assign(goods, {
    page: 0,
    limit: 20,
    cache: {
      page: 1,
      list: [],
      status: "nomore"
    },
    next: false,
    list: []
  });
  getGoods();
}

</script>

<style lang="scss" scoped>
// scss
</style>